<template>
	<div class="content" id="content">
		<div class="done" v-show="done">
			<img src="../../static/image/done.png" style="width: 100px;height: 100px" />
			<div style="color:rgba(255,255,255,1);font-size:14px;font-family:PingFangSC-Medium,PingFangSC;font-weight:500;margin-top: 10px">
				{{ $t('ivcs.inputsuccess') }}
			</div>
		</div>

		<my-step style="margin-top: 20px;width: 100%;" :current="0"></my-step>
		<!--<Steps :current="0" style="margin-top: 30px;" size="small">-->
		<!--<Step title="基本信息"></Step>-->
		<!--<Step title="自助提交"></Step>-->
		<!--<Step title="视频聊天"></Step>-->
		<!--<Step title="完成业务"></Step>-->
		<!--</Steps>-->

		<div class="line"></div>

		<div class="title">{{ $t('ivcs.inputinfo') }}</div>

		<div class="item itemrow">
			<span class="itemtitle">{{ $t('ivcs.name') }}</span>
			<input class="input" v-model="name" />
		</div>

		<div class="item itemrow">
			<span class="itemtitle">{{ $t('ivcs.idcard') }}</span>
			<input class="input" v-model="idcard" />
		</div>

		<div class="item itemrow">
			<span class="itemtitle">{{ $t('ivcs.mobile') }}</span>
			<input class="input" v-model="mobile" />
		</div>

		<div class="item itemrow">
			<span class="itemtitle">{{ $t('ivcs.category') }}</span>
			<Select v-model="category" class="select">
				<Option v-for="item in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</div>

		<div class="item itemrow">
			<span class="itemtitle">性别</span>
			<Select v-model="gender" class="select">
				<Option v-for="item in genderList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</div>

		<div class="nextdiv">
			<Button class="next" type="primary" @click="next">{{ $t('ivcs.next') }}</Button>
		</div>

		<div style="height: 10px;background:rgba(252,247,247,1);width: 100%"></div>
	</div>
</template>

<script>
import MyStep from './MyStep';
export default {
	name: 'Inputform',
	components: { MyStep },
	data() {
		return {
			categoryList: [
				{
					value: this.$t('ivcs.personalloan'),
					label: this.$t('ivcs.personalloan')
				},
				{
					value: this.$t('ivcs.businessloan'),
					label: this.$t('ivcs.businessloan')
				},
				{
					value: this.$t('ivcs.smallloan'),
					label: this.$t('ivcs.smallloan')
				}
			],
			done: false,
			category: null,
			name: null,
			idcard: null,
			mobile: null,
			gender: null,
			genderList: [
				{
					value: '先生',
					label: '男'
				},
				{
					value: '女生',
					label: '女'
				}
			],
			height: window.screen.height
		};
	},
	mounted() {
		var content = document.getElementById('content');
		content.style.height = this.height + 'px';
		this.category = sessionStorage.getItem('category');
		this.name = sessionStorage.getItem('username');
		this.mobile = sessionStorage.getItem('mobile');
		this.idcard = sessionStorage.getItem('idcard');
		this.gender = sessionStorage.getItem('gender');
	},
	methods: {
		next() {
			// 正则表达式：
			var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
			var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
			if (this.category == null || this.name == null || this.idcard == null || this.mobile == null || this.category === '' || this.name === '' || this.idcard === '' || this.mobile === '') {
				this.$Message.error(this.$t('input.perfectInformation'));
			} else if (!idcardReg.test(this.idcard)) {
				this.$Message.error(this.$t('input.idcardError'));
			} else if (!phoneReg.test(this.mobile)) {
				this.$Message.error(this.$t('input.phoneError'));
			} else if (this.name.length > 16) {
				this.$Message.error(this.$t('input.nameLengthError'));
			} else {
				sessionStorage.setItem('username', this.name.trim());
				sessionStorage.setItem('idcard', this.idcard.trim());
				sessionStorage.setItem('mobile', this.mobile.trim());
				sessionStorage.setItem('category', this.category.trim());
				sessionStorage.setItem('gender',this.gender);
				//验证用户提交的信息
				this.done = true;
				var self = this;
				window.setTimeout(function() {
					self.done = false;
					self.$router.push('/takephoto');
				}, 1000);
			}
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	height: 100%;
}

.title {
	width: 216px;
	height: 50px;
	font-size: 20px;
	font-family: PingFangSC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 50px;
	margin-top: 20px;
}

.line {
	margin-top: 13px;
	width: 100%;
	height: 7px;
	background: rgba(252, 247, 247, 1);
}

.item {
	width: 90%;
	height: 42px;
	margin-top: 20px;
	background: rgba(246, 246, 246, 1);
	border-radius: 2%;
}

.itemrow {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
}

.next {
	width: 90%;
	/*background:rgba(0,194,255,1);*/
	margin-top: 40px;
	height: 42px;
	background: rgba(100, 202, 171, 1);
	border: 0px;
	border-radius: 21px;
}

.itemtitle {
	width: 70px;
	height: 40px;
	font-size: 14px;
	margin-left: 19px;
	font-family: PingFangSC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 40px;
	text-align: left;
}

.send {
	width: 80px;
	background: rgba(216, 216, 216, 1);
	font-size: 10px;
	font-family: PingFangSC;
	margin-right: 0px;
	color: rgba(135, 135, 135, 1);
	height: 28px;
	line-height: 28px;
	margin-right: 0px;
}

.input {
	/*opacity: 0;*/
	background: rgba(246, 246, 246, 1);
	height: 42px;
	width: 70%;
	border: 0px;
}

.nextdiv {
	background: rgba(252, 247, 247, 1);
	width: 100%;
	margin-top: 10px;
	flex: 1;
}

.select {
	width: 250px;
	/*margin-right: -70px;*/
	/*background-color: rgba(246,246,246,1);*/
	/*border: 1px solid rgba(246,246,246,1);*/
}

.ivu-select-selection {
	background-color: rgba(246, 246, 246, 1);
	border: 1px solid rgba(246, 246, 246, 1);
}

.done {
	background: rgba(51, 51, 51, 0.72);
	opacity: 0.2983;
	width: 100%;
	height: 100%;
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
